spb/rareindex

1import { ImageResponse } from 'next/og';2import { getAssetBySlug } from '@/lib/queries/assets';3import { catName } from '@/lib/taxonomy';4import { ogMark } from '@/components/layout/logo';56export const runtime = 'nodejs';7export const alt = 'RareIndex asset card';8export const size = { width: 1200, height: 630 };9export const contentType = 'image/png';1011function money(v: number | null): string {12  if (v === null) return 'Data unavailable';13  return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: v >= 1000 ? 0 : 2 }).format(v);14}1516export default async function Image({ params }: { params: Promise<{ slug: string }> }) {17  const { slug } = await params;18  const a = await getAssetBySlug(slug);19  const title = a?.title ?? 'RareIndex';20  const cat = a ? catName(a.categorySlug) : '';21  const riv = a ? money(a.rivUsd) : '';22  const chg = a?.change30d ?? null;23  return new ImageResponse(24    (25      <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 64, background: '#0b0c0e', color: '#f2f2f0', fontFamily: 'sans-serif' }}>26        <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 28 }}>27          {ogMark(44)}28          <span style={{ display: 'flex', fontWeight: 600 }}>29            <span>Rare</span>30            <span style={{ color: '#D9AE5F' }}>Index</span>31          </span>32          <span style={{ color: '#8b8b93' }}>· {cat}</span>33        </div>34        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>35          <div style={{ fontSize: 56, fontWeight: 600, lineHeight: 1.1, letterSpacing: -1 }}>{title.length > 80 ? `${title.slice(0, 79)}…` : title}</div>36          <div style={{ display: 'flex', alignItems: 'baseline', gap: 24 }}>37            <span style={{ fontSize: 24, color: '#8b8b93', textTransform: 'uppercase', letterSpacing: 2 }}>RareIndex Valuation</span>38            <span style={{ fontSize: 64, fontWeight: 700 }}>{riv}</span>39            {chg !== null ? <span style={{ fontSize: 32, color: chg >= 0 ? '#34c47c' : '#ef5a5f' }}>{`${chg >= 0 ? '+' : ''}${(chg * 100).toFixed(1)}% 30D`}</span> : null}40          </div>41        </div>42        <div style={{ fontSize: 22, color: '#6f6f76' }}>{a ? `${a.salesCount.toLocaleString('en-US')} verified sales · ${a.activeListings.toLocaleString('en-US')} active listings · www.rareindex.io` : 'www.rareindex.io'}</div>43      </div>44    ),45    { ...size },46  );47}48